<div class="pull-request-files-header">
    <div class="pull-request-file-switcher tlp-dropdown" ng-show="! files_controller.loading_files">
        <button type="button" id="file-switcher-dropdown-button" class="tlp-button-primary tlp-button-outline tlp-button-wide">
            <span class="pull-request-file-status pull-request-file-status-{{ files_controller.selected_file.status }}">{{ files_controller.selected_file.status }}</span>
            <span class="pull-request-file-path">{{ files_controller.selected_file.path }}</span>
            <span class="pull-request-file-changes pull-request-file-lines-added tlp-text-success" ng-class="{ 'pull-request-file-show-changes': files_controller.selected_file.lines_added > 0}">+{{ files_controller.selected_file.lines_added }}</span>
            <span class="pull-request-file-changes pull-request-file-lines-removed tlp-text-danger" ng-class="{ 'pull-request-file-show-changes': files_controller.selected_file.lines_removed > 0}">-{{ files_controller.selected_file.lines_removed }}</span>
            <i class="fa fa-caret-down"></i>
        </button>
        <div id="file-switcher-dropdown-content" class="tlp-dropdown-menu" role="menu">
            <div class="tlp-dropdown-menu-item"
                ng-class="{ 'pull-request-file-selected': files_controller.isFileSelected(file) }"
                ng-repeat="file in (files_controller.files | filter: $select.search) track by file.path"
                ng-click="files_controller.loadFile(file)"
            >
                <div class="pull-request-file">
                    <span class="pull-request-file-status pull-request-file-status-{{ file.status }}">{{ file.status }}</span>
                    <span class="pull-request-file-path">{{ file.path }}</span>
                    <span class="pull-request-file-changes pull-request-file-lines-added tlp-text-success" ng-class="{ 'pull-request-file-show-changes': file.lines_added > 0}">+{{ file.lines_added }}</span>
                    <span class="pull-request-file-changes pull-request-file-lines-removed tlp-text-danger" ng-class="{ 'pull-request-file-show-changes': file.lines_removed > 0}">-{{ file.lines_removed }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="tlp-button-bar">
        <div class="tlp-button-bar-item">
            <input type="checkbox"
                   id="side-by-side-diff-button"
                   class="tlp-button-bar-checkbox"
                   ng-checked="files_controller.isSideBySideMode()"
                   ng-click="files_controller.switchDiffDisplayMode(files_controller.side_by_side_diff)"
            >
            <label for="side-by-side-diff-button"
                   class="tlp-button-primary tlp-button-outline tlp-tooltip tlp-tooltip-bottom"
                   data-tlp-tooltip="{{:: 'Side by side diff' | translate }}"
            >
                <i class="fa fa-files-o tlp-button-icon"></i>
            </label>
        </div>
        <div class="tlp-button-bar-item">
            <input type="checkbox"
                   id="unified-diff-button"
                   class="tlp-button-bar-checkbox"
                   ng-checked="files_controller.isUnifiedMode()"
                   ng-click="files_controller.switchDiffDisplayMode(files_controller.unified_diff)"
            >
            <label for="unified-diff-button"
                   class="tlp-button-primary tlp-button-outline tlp-tooltip tlp-tooltip-bottom"
                   data-tlp-tooltip="{{:: 'Unified diff' | translate }}"
            >
                <i class="fa fa-file-o tlp-button-icon"></i>
            </label>
        </div>
    </div>
</div>

<div ng-if="files_controller.loading_files" class="pull-request-modified-files-loading"></div>

<div ui-view="file-diff" ng-if="! files_controller.loading_files"></div>
